import { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
import { createTheme, ThemeProvider, CssBaseline, useMediaQuery, AppBar, Toolbar, Typography, Button, Box } from '@mui/material';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import SettingsPage from './pages/SettingsPage';
import SqlCasePage from './pages/SqlCasePage';
import OsInfoPage from './pages/OsInfoPage';
import FileOperationPage from './pages/FileOperationPage';
import HttpCasePage from './pages/HttpCasePage';
import NotificationCasePage from './pages/NotificationCasePage';
import LogCasePage from './pages/LogCasePage';
import TrayCasePage from './pages/TrayCasePage';
import SystemInfoPage from './pages/SystemInfoPage';
import './App.css';

// 创建导航按钮组件
const NavButton = ({ to, children }) => {
  const location = useLocation();
  const isActive = location.pathname === to;

  return (
    <Button
      component={Link}
      to={to}
      sx={{
        color: '#000000',
        position: 'relative',
        '&::after': {
          content: '""',
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          height: isActive ? '2px' : '0px',
          backgroundColor: '#24c8db',
          transition: 'height 0.3s ease',
        },
      }}
    >
      {children}
    </Button>
  );
};

function App() {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  // 创建自定义主题
  const theme = createTheme({
    palette: {
      mode: 'light', // 强制使用浅色模式
      primary: {
        main: '#24c8db',
      },
      secondary: {
        main: '#646cff',
      },
      background: {
        default: '#ffffff',
        paper: '#ffffff',
      },
    },
    typography: {
      fontFamily: 'Inter, Avenir, Helvetica, Arial, sans-serif',
      h4: {
        fontSize: '2.125rem',
      },
      h6: {
        fontSize: '1.25rem',
      },
      body1: {
        fontSize: '1rem',
      },
      body2: {
        fontSize: '0.875rem',
      },
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            borderRadius: 8,
            textTransform: 'none',
            fontWeight: 500,
          },
        },
      },
      MuiPaper: {
        styleOverrides: {
          root: {
            borderRadius: 12,
          },
        },
      },
      MuiAppBar: {
        styleOverrides: {
          root: {
            height: '55px',
            minHeight: '55px',
            backgroundColor: '#ffffff',
            boxShadow: 'none',
            borderBottom: 'none',
          },
        },
      },
      MuiToolbar: {
        styleOverrides: {
          root: {
            minHeight: '55px',
            height: '55px',
          },
        },
      },
      MuiCssBaseline: {
        styleOverrides: {
          body: {
            WebkitTapHighlightColor: 'transparent',
            backgroundColor: '#ffffff',
          },
          '*::-webkit-scrollbar': {
            width: '8px',
            height: '8px',
          },
          '*::-webkit-scrollbar-thumb': {
            backgroundColor: 'rgba(0, 0, 0, 0.2)',
            borderRadius: '4px',
          },
          '*::-webkit-scrollbar-track': {
            backgroundColor: 'transparent',
          },
        }
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Router>
        <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', backgroundColor: '#ffffff' }}>
          <AppBar position="static">
            <Toolbar>
              <Typography variant="h6" component="div" sx={{ flexGrow: 1, color: '#000000', userSelect: 'none' }}>
                Tauri App
              </Typography>
              <NavButton to="/">首页</NavButton>
              <NavButton to="/about">关于</NavButton>
              <NavButton to="/settings">设置</NavButton>
            </Toolbar>
          </AppBar>
          <Box sx={{ flexGrow: 1, overflow: 'auto', backgroundColor: '#ffffff' }}>
            <Routes>
              <Route path="/" element={<HomePage />} />
              <Route path="/about" element={<AboutPage />} />
              <Route path="/settings" element={<SettingsPage />} />
              <Route path="/sql-case" element={<SqlCasePage />} />
              <Route path="/os-info" element={<OsInfoPage />} />
              <Route path="/file-operation" element={<FileOperationPage />} />
              <Route path="/http-case" element={<HttpCasePage />} />
              <Route path="/notification-case" element={<NotificationCasePage />} />
              <Route path="/log-case" element={<LogCasePage />} />
              <Route path="/tray-case" element={<TrayCasePage />} />
              <Route path="/system-info" element={<SystemInfoPage />} />
            </Routes>
          </Box>
        </Box>
      </Router>
    </ThemeProvider>
  );
}

export default App;
